<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<x-title :ishowZw='true' :title_bg='true' titleText=''>
			<view class="input flex align-center" slot="input" style=" ">
				<view class="input_img ml-20 aj-center" @click="doctorlistsbool">
					<image src="../static/doct/search.png" mode=""></image>
				</view>
				<input type="text" v-model="pick.keyword" class="ml-20 fs-26 fw-400 c-99" @focus="leftimg=false"
					placeholder="输入关键字搜索" value="" @confirm="doctorlistsbool" />

				<view class="input_img aj-center" @click="clear" v-if="pick.keyword.length!=0">
					<image src="../static/doct/x.png" mode=""></image>
				</view>
			</view>
		</x-title>
		<!-- #endif -->



		<view class="just-between   mb-13 f-26 fw-400 c-11" style="padding: 21rpx 0rpx;
		width: 100%;border-top: -1rpx solid #EEEEEE ;border-bottom: 1rpx solid #EEEEEE ;
			    position: fixed;
			    z-index: 999;
			    background: #ffffff;
			">
			<!-- 科室下拉的不是内容区域 -->
			<view class="aj-center flex" style="width: 50%;" @click="down">
				<view class="mr12" :style="!doneboole?'color:#DFB982':''">
					<!-- {{name.length!=0 ? name:'科室' }} -->
					{{sonrightquanbuindex==0?'全部':name}}
				</view>
				<view class="aj-center" style="width: 20rpx;height: 10rpx;">
					<image v-if="doneboole" src="../static/doct/xiala.png" mode=""></image>
					<image v-else src="../static/doct/shangla.png" mode=""></image>
				</view>
			</view>

			<view class="" style="width: 2rpx;height: 48rpx;background-color: #EEEEEE ;">

			</view> 
			<view class="aj-center flex" style="width: 50%;" @click="downdiqu">
				<view class="mr12" :style="!doneboolediqu?'color:#DFB982':''">
					{{pickname.length!=0 ? pickname:'全部地区' }}
				</view>
				<view class="aj-center" style="width: 20rpx;height: 10rpx;">
					<image v-if="doneboolediqu" src="../static/doct/xiala.png" mode=""></image>
					<image v-else src="../static/doct/shangla.png" mode=""></image>
				</view>
			</view>

		</view>





		<!-- 科室 -->
		<view class="bg-FFFFFF flex f-26 c-11 fw-400" v-show="!doneboole"
			style=" width: 100%; position: absolute;margin-top: -10rpx; z-index: 99; ">
			<u-popup v-model="show" mode="top" :mask-close-able="false">
				<view class="flex" style="height: 636rpx ; width: 100%;    z-index: 99;  ">
					<!-- 科室左侧列表 -->
					<view class="bg-F5F5F5 align-center "
						style="width: 50%;  line-height: 77rpx;     padding-top: 33rpx; text-align: center;">
						<scroll-view scroll-y="true" style="height: 100%;overflow: scroll;">
							<view class="bg-F5F5F5     align-center " style="width: 100%;"
								:class="sonlefttquanbuindex==0?'bg-FFFFFF':''">
								<view class="align-center" style="height: 77rpx;" @click="sonleftquanbu(0)">
									全部科室
								</view>
							</view>

							<view class="bg-F5F5F5     align-center " style="width: 100%;"
								:class="item.id==quanbuid?'bg-FFFFFF':''" v-for="(item,index) in sonList"
								:key="item.id">
								<view class="align-center" style="height: 77rpx;" @click="quanbu(item.id)">
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>

					<!-- 右侧科室 -->
					<view class="  " style="width: 50% ;padding-top: 33rpx;">
						<scroll-view scroll-y="true" style="height: 100%;  overflow: scroll;">
							<view v-if="sonrightquanbuindex==0" @click="sonrightquanbu(0)"
								:class="sonrightquanbuindex==0?'bg-F5F5F5':''" class=" pl-40 flex align-center"
								style="height: 77rpx;width: 100%;">
								全部
							</view>
							<view v-if="itemsonindex!=-1" @click="sonright(itemson)"
								:class="itemson.id==itemsonindex?'bg-F5F5F5':''" class=" pl-40 flex align-center"
								style="height: 77rpx;width: 100%;    " v-for="(itemson,indexson) in sonrightList"
								:key="itemson.id">
								{{itemson.nickname}}efwf
							</view>
						</scroll-view>
					</view>
				</view>


			</u-popup>

		</view>

		<!-- 地区的下拉 -->
		<view class=" flex f-26 c-11 fw-400" v-show="!doneboolediqu"
			style=" width: 100%; position: absolute;margin-top: -10rpx;z-index: 99;height: 636rpx;   ">
			<u-popup v-model="show" mode="top" :mask-close-able="false">
				<view style="width: 100%;">
					<areaSelect level="2" @myself="myself" style="width: 100%;" @change="changeArea" @arr="arr">
					</areaSelect>
				</view>
			</u-popup>
		</view>





		<scroll-view style=" margin-top: 104rpx;  height:100vh;" scroll-y="true" @scrolltolower="crolltolower">

			<view>
				<x-doctor-once @click.native="doctintro(item.id)" :item="item" v-for="(item,index) in doctList"
					:key="item.id" />
			</view>
			<view class="aj-center" style="width: 100%;" v-if="doctList.length==0">
				<view class="">
					暂无更多
				</view>
			</view>
		</scroll-view>



	</view>
</template>

<script>
	// import areaSelect from 'uni_modules/leo-area-select/components/leo-area-select/index.vue';
	// import areaSelect from '../leo-area-select/index.vue';
	import areaSelect from '../uni_modules/leo-area-select/components/leo-area-select/index.vue';
	export default {
		components: {
			areaSelect
		},
		data() {
			return {
				// 右侧科室 id默认选中全部
				sonrightquanbuindex: 0,
				// 左侧科室 id默认选中全部
				sonlefttquanbuindex: 0,
				show: true,
				name: '', //科室选中的参数
				pickname: '', //地区
				navbaractive: false,
				leftimg: true,
				rightimg: false,
				doneboole: true, //科室下拉显示或隐藏
				doneboolediqu: true, //地区下拉显示或隐藏
				itemsonindex: '', //科室右侧选中的id
				quanbuid: '', //科室左侧选中的id
				diqusonemitbool: false, //地区的第二个点击确定
				// inputtext: "",
				doctList: [],
				arrsiquindex: '',
				myselfbool: false,
				changeAreabool: true,
				sonList: [],
				sonrightList: [],
				pick: {
					// province: '北京市',
					// city: '北京市',
					province: '',
					city: '',
					keyword: "",
					limit: 10,
					page: 0,
					department_id: ''
				},
				pickonce: {
					province: '',
					city: '',
					limit: 10,
					page: 0,
					keyword: "",
					department_id: '',
					// pagenum: '', //数据条数
				}

			}
		},
		onLoad() {
			this.sonnew();
			this.doctorlistsonce()
		},

		methods: {
			// 点击左边的全部的时候
			sonleftquanbu(id) {
				this.sonlefttquanbuindex = 0;
				this.quanbuid = -1; //点击全部的时候把其他的科室置为不可以选中
				this.itemsonindex = -1 //点击全部的时候把其他的分类科室置为不可以选中
				this.sonrightquanbuindex = 0; //点击左侧右侧全部显示出来
			}, 
			// 右侧科室 默认选中全部
			sonrightquanbu(index) {
				this.sonrightquanbuindex = 0; //点击左侧右侧全部显示出来
				// this.sonrightquanbuindex = index;
				this.doneboole = !this.doneboole
				this.pick.department_id="",
				this.doctList=[];
				this.doctorlists()

			},
			clear() {
				this.pick.keyword = '';
				this.leftimg = true

			},
			crolltolower() {
				if (this.pagenum != this.doctList.length) {
					// this.pickonce.limit += 10;
					this.pickonce.page += 1;
					this.doctorlistsonce()
					if ((this.pick.city != '' && this.pick.province != '') || (this.pick.department_id != '') || (this.pick
							.keyword != '')) {
						// this.pick.limit += 10;
						this.pick.page += 1;
						// this.doctList = [];
						this.doctorlists()
					}
					console.log('下拉')
				}
				console.log('下拉不了了吧')
				// if(this.doneboolediqu){
				// 	this.pick.limit+=10;
				// 	this.pick.page+=1;
				// 	this.doctList = [];
				// 	this.doctorlists() 
				// }
			},
			// 刚开始加载一次
			doctorlistsonce() {
				this.$https('doctindex.doctorlists', this.pickonce,'','',{'content-type':'application/x-www-form-urlencoded'}).then(res => {

					// if (this.pick.keyword != '') {
					// 	this.pick.keyword = ''
					// }
					let data = res.data;
					this.pagenum = res.rownum;
					this.doctList.push(...data);
					// this.article=data.article;
					// this.doctor=data.doctor;
					// this.goods=data.goods;
					console.log(res, 'gfuygu')
					// if (res.code === 1) {
					// 	commit('AGENT_INFO', res.data.data);
					// }
					// resolve(res)
				}).catch(e => {
					// reject(e)
				});
			},
			// 索引数组子组件传输  判断是点击的一级联动还是二级联动
			arr(value) {
				let arrsiquindex = value[1];
				if (arrsiquindex > 0) {
					this.doneboolediqu = !this.doneboolediqu
					this.doctList = [];
					this.doctorlists()
				}
				console.log(value, 'arrfuji')

				// console.log(this.arrsiquindex,'this.arrsiquindex')
			},
			// 点击多次数
			myself(value) {
				console.log(value, "点击自己多次value")
				if (value) {
					this.doneboolediqu = !this.doneboolediqu
					if (this.changeAreabool) {
						this.pickname = '北京市',
							this.pick.province = "北京市",
							this.pick.city = "北京市",
							this.pick.limit = 10;
						this.pick.page = 0;
						this.doctList = [];
						this.doctorlists()
					} else {
						this.pick.limit = 10;
						this.pick.page = 0;
						this.doctList = [];
						this.doctorlists()
					}
				}
				// this.myselfbool=value;
				console.log("点击自己多次")
			},

			sonright(item) {
				this.sonrightquanbuindex = 1; //取消默认选中
				this.name = item.name;
				console.log(item, 'right')
				this.doneboole = !this.doneboole
				this.itemsonindex = item.id;
				if (this.doneboole) {
					this.pick.department_id = this.itemsonindex;
					this.pick.limit = 10;
					this.pick.page = 0;
					this.doctList = [];
					this.doctorlists();
				}
				this.doneboolediqu = true
			},
			// 选择科室第一个
			quanbu(id) {
				this.sonlefttquanbuindex = 1;
				this.sonrightquanbuindex = 1;
				console.log(id, 'id科室第一')
				this.quanbuid = id;
				this.sonList.forEach(item => {
					if (item.id == id) {
						console.log(item.sons, 'item.sons')
						this.sonrightList = item.sons;
						this.itemsonindex=-2;
						return;
					}
				})

				console.log(this.sonrightList, 'this.sonrightList')
			},

			// 搜索
			doctorlistsbool() {
				this.pick.limit = 10;
				this.pick.page = 0;
				this.doctList = [];
				this.doctorlists();
			},
			// 请求
			doctorlists() {
				this.$https('doctindex.doctorlists', this.pick,'','',{'content-type':'application/x-www-form-urlencoded'}).then(res => {

					// this.doctList = [];
					// this.sonList= [],
					// this.sonrightList = [];
					// if (this.pick.keyword != '') {
					// 	this.pick.keyword = ''
					// }
					this.pagenum = res.rownum;
					let data = res.data;
					this.doctList.push(...data);
					// this.article=data.article;
					// this.doctor=data.doctor;
					// this.goods=data.goods;
					console.log(res, 'gfuygu')
					// if (res.code === 1) {
					// 	commit('AGENT_INFO', res.data.data);
					// }
					// resolve(res)
				}).catch(e => {
					// reject(e)
				});
			},
			//初始化调用 新生儿下拉的数据
			sonnew() {
				this.$https('doctindex.departmentlist', this.pick).then(res => {
					this.sonList = res.data;
					// 为了默认显示妇科   暂时清除 目前换为全部
					// this.sonrightList = res.data[0].sons;

					console.log(res, 'departmentlist')

				}).catch(e => {

				});
			},
			doctintro(id) {
				uni.navigateTo({
					url: `/goodsPage/doctIntro/doctIntro?id=${id}`
				})
			},
			down() {
				console.log(this.quanbuid,'quanbuid')
				console.log(this.itemsonindex,'quanbuid')
				// 把当前的下拉弹出科室下拉显示或隐藏
				this.doneboole = !this.doneboole
				if (this.doneboole == false) { //下拉成功 
					if (this.quanbuid == -1 && this.itemsonindex == -1) {
						this.sonlefttquanbuindex = 0;
						this.sonrightquanbuindex = 0;
						// 左侧科室 id默认选中全部

						// this.quanbuid = -1; //点击全部的时候把其他的科室置为不可以选中
						// this.itemsonindex = -1 //点击全部的时候把其他的分类科室置为不可以选中
					}
					// 下拉还没有点击选项 设置一个默认的
					if (this.quanbuid == '' && this.itemsonindex == '') {
						// this.sonrightList = this.sonList[0].sons;
						// 这时候选中全部科室  全部
						this.sonrightquanbuindex = 0;
						// 左侧科室 id默认选中全部
						this.sonlefttquanbuindex = 0;


					} else {
						// this.quanbu()
					}
				}
				if (this.doneboolediqu == false) {
					// 把地区的收上去
					this.doneboolediqu = !this.doneboolediqu
					// 吧默认选中内容重置为空

				}

			},
			downdiqu() {
				// this.doneboole = !this.doneboole
				if (this.doneboole == false) {
					this.doneboole = !this.doneboole
				}
				this.doneboolediqu = !this.doneboolediqu

				// 收起下拉请求数据 暂时不使用  需求pass
				// if (this.doneboolediqu) {
				// 	this.doctorlists()
				// }
				// this.doneboole = true
			},

			changeArea(result) {
				//点击北京changeArea事件没反应就是默认的北京
				// 默认data 下changeAreabool=true //说明默认的北京 
				// 一旦data下的为false就是不默认北京
				this.changeAreabool = false;
				console.log(result, 'result')
				this.pick.province = result[0].name;

				this.pick.city = result[1].name;
				this.pickname = result[1].name;
				console.log('area change', result);
			}
		},

	}
</script>


<style scoped>
	.u-drawer.data-v-17becaea {
		display: block;
		position: fixed;
		top: 206rpx !important;
		margin-top: 208rpx !important;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	areaSelect {
		background-color: #F5F5F5;
	}

	.leo-area-select .list .list-item {
		background-color: #F5F5F5;
	}

	.input {
		width: 448rpx;
		height: 64rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		margin-left: -158rpx;

		/* margin-right: 85rpx; */


	}


	.input_img {
		width: 30rpx;
		height: 30rpx;
	}


	image {

		width: 100%;
		height: 100%;

	}
</style>
